<template>
  <AppPage class="bg-[#f8f8f8]" article-class="" header-class="bg-[#3d8ffd]">
    <template #center>
      <span class="c-white text-16"> {{route.query.selectedProvince}}送签-{{route.query.country_name }}签证</span>
    </template>
    <div class="pb-68">
      <div class="box-shadow px-15  bg-white bg-theme">
        <div class="py-10">
          <div class="text-15 font-bold px-10 c-white text-ellipsis--l2">{{productDetail.product_name || '打的费领导时间法拉第是否连接ad发觉打的费领导时间法拉第是否连接ad发觉打的费领导时间法拉第是否连接ad发觉'}}</div>
          <div class="px-10 c-white white-space">
            <span class="text-15 mr-2">￥</span>
            <span class="text-20  font-bold"> {{productDetail.price || '6666'}}</span>
          </div>
        </div>
      </div>
      <div class="relative top--2 px-15 mb-15">
        <div class="absolute left-0 top-0 w-full h-80  bg-theme z-1"></div>
        <div class="relative z-10 rounded-8 overflow-hidden">
          <div class="flex justify-between py-10 bg-[#ebf3ff]">
            <!-- <div class="text-16 px-10">{{visaType(productDetail.visa_type_id)}}</div> -->
            <div class="text-16 px-10 ">
              <span class="text-[#999]"></span> 预计办理时长：
              <span class="font-bold text-18">
                {{productDetail.material_check_days+productDetail.embassy_check_min_day || ''}}-{{productDetail.material_check_days+productDetail.embassy_check_max_day || ''}}
              </span>
              <span class="text-[#999]">个工作日</span>
            </div>
          </div>
          <div class="flex py-15 bg-white">
            <div class="flex-1">
              <div class="text-16 px-10 pb-6 text-center">{{productDetail.validity_period_unit}}</div>
              <div class="text-14 px-10 text-center c-gray">有效期限</div>
            </div>
            <div class="flex-1">
              <div class="text-16 px-10 pb-6 text-center">
                <span class="text-16">{{productDetail.stay_duration_unit}}</span>
              </div>
              <div class="text-14 px-10 text-center c-gray">停留时长</div>
            </div>
            <div class="flex-1">
              <div class="text-16 px-10 pb-6 text-center">{{productDetail.entry_count_unit}}</div>
              <div class="text-14 px-10 text-center c-gray">入境次数</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white mb-15 rounded-4">
        <div class="text-16 font-bold py-10 px-15 border-b b-b-solid b-b-[#ededed]">受理范围：</div>
        <div class="py-10">
          <div class="text-16 px-15 flex" v-for="(item,index) in productDetail.accept_range" :key="index">
            <div>{{ index+1 }}：</div>
            <div>{{item}}</div>
          </div>
        </div>
      </div>

      <div class="box-shadow bg-white mb-15 rounded-4 px-15">
        <div class="flex justify-between items-center">
          <div class="text-14 font-bold py-10 c-[#333]">所需资料</div>
          <div class="text-14 font-bold py-10 c-[#333] flex  items-center">
            <span class="mr-2">全部资料</span>
            <RectRight color="#999" />
          </div>
        </div>
        <selectIdentify v-model:selectIdentityId="selectIdentityId" @change="changeIdentity" />
        <div class="flex justify-between">
          <div class="text-14 font-bold py-10 c-[#999]">需上传资料()</div>
          <div class="text-14 py-10 c-[#999]">带<span class="c-red">*</span>为必备资料</div>
        </div>
        <div>
          <electronicMaterial :electronicMaterialList="electronicMaterialList" />
        </div>
      </div>
      <div class="bg-white need-kown mb-15">
        <nut-tabs v-model="selectedState" color="#3d8ffd" background="#fff" swipeable auto-height>
          <nut-tab-pane title="办理须知" pane-key="0">
            <div class="text-16 px-10 pb-10">{{productDetail.instruction}}</div>
          </nut-tab-pane>
          <nut-tab-pane title="温馨提示" pane-key="1">
            <div class="text-16 px-10 pb-10 flex" v-for="(item, index) in productDetail.reminder" :key="index">
              <div>{{ item }}</div>
            </div>
          </nut-tab-pane>
        </nut-tabs>
      </div>
      <div class="box-shadow bg-white mb-15 rounded-4 pb-10">
        <div class="text-16 font-bold py-10 px-10">办理流程：</div>
        <div class="px-10">
          <nut-steps progress-dot direction="vertical" :current="productDetail.handle_process && (productDetail.handle_process.length+1)">
            <nut-step v-for="(item,index) in productDetail.handle_process" :title="item.title" :content="item.content">
              <template #title>
                <span class="c-[#333] font-bold">{{ item.title }}</span>
              </template>
            </nut-step>
          </nut-steps>
        </div>
      </div>
    </div>
    <div v-if="route.query.selectedProvince" class="w-full px-15 box-border fixed bottom-0 left-0 z-10 bg-white py-15">
      <div class="w-full  box-border" @click="toBegin">
        <nut-button :block="true" type="info" color="#3d8ffd">开始办理</nut-button>
      </div>
    </div>
  </AppPage>
  <datePick ref="selectDateTime" v-model:value="travelTime" @confirm="confirmTravelTime" />
</template>
<script setup>
import { onMounted, reactive } from 'vue'
import { productDetailQuery, productBriefQuery, } from '@/api/visa'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import selectIdentify from './components/selectIdentify.vue'
import electronicMaterial from './components/electronicMaterial.vue'
import { visaType, identityTYpe } from '@/utils/type/visa.js'
import { useUserStore } from '@/store/modules/user/index.js'
import { RectRight } from '@nutui/icons-vue';
import datePick from '@/components/datePick/index.vue'

const permanentAddress = useUserStore().permanentAddress
const route = useRoute()
const router = useRouter()

let productDetail = reactive({})
let identityTYpeList = ref([])
let selectidentityTYpe = ref('')
let submitProductMaterial = reactive({})
let product_material = reactive({})

let positionColumns = ref([])
let positionValue = ref('')
let positionText = ref('')
let selectIdentityId = ref(0)
let selectedState = ref(0)
let electronicMaterialList = ref([])
const getProductDetailFun = async () => {
  let product_id = route.query.product_id
  const result = await productDetailQuery(product_id)
  let data = result.data
  for (const key in data) {
    if (Object.hasOwnProperty.call(data, key)) {
      productDetail[key] = data[key];
      if (key === 'handle_process') {
        productDetail[key] = JSON.parse(data[key]);
      }
      if (key === 'accept_range' && data[key].includes('\n')) {
        productDetail[key] = data[key].split('\n');
      } else if (key === 'accept_range' && !data[key].includes('\n')) {
        productDetail[key] = [data[key]]
      }
      if (key === 'reminder' && data[key].includes('\n')) {
        productDetail[key] = data[key].split('\n');
      } else if (key === 'reminder' && !data[key].includes('\n')) {
        productDetail[key] = [data[key]]
      }
    }
  }
  product_material = data.product_material
  let _positionColumns = []
  product_material.forEach((item, index) => {
    identityTYpeList.value.push({ value: item.identity_id, label: identityTYpe[item.identity_id] })
    _positionColumns.push({ value: item.identity_id, text: identityTYpe[item.identity_id] })
    let material = item.material
    if (material) {
      for (const key in material) {
        if (Object.hasOwnProperty.call(material, key)) {
          const element = material[key];
          if (Array.isArray(element)) {
            element.forEach(_item => {
              if (_item.attention) {
                if (_item.attention.includes('\n')) {
                  _item.attention = _item.attention.split('\n')
                } else {
                  _item.attention = [_item.attention]
                }
              }
            })
          }
        }
        if (key === 'elec_material' && index === 0) {
          electronicMaterialList.value = material[key]
        }
      }
    }
  })
  selectidentityTYpe.value = product_material[0].identity_id
  positionValue.value = product_material[0].identity_id
  positionText.value = identityTYpe[product_material[0].identity_id]
  positionColumns.value = _positionColumns
  submitProductMaterial = product_material[0]
}

// 选择不同职业 
const changeIdentity = (value) => {
  product_material.forEach((item, index) => {
    let material = item.material
    if (material) {
      for (const key in material) {
        if (key === 'elec_material' && index === value) {
          electronicMaterialList.value = material[key]
        }
      }
    }
  })
}

let productList = ref([])
const getProductListFun = async (provinceCode) => {
  let params = {
    country_name: route.query.country_name,
    province_code: provinceCode,
    page_size: 1000,
    page: 1
  }
  const result = await productBriefQuery(params)
  if (+result.code === 200) {
    productList.value = result.data.data
  }
}
let selectedCountryIndex = ref(0)
const goSelectVisa = async (item, index) => {
  selectedCountryIndex.value = index
  let provinceCode = item.key
  await getProductListFun(provinceCode)
}
let travelTime = ref('')
const selectDateTime = ref('')
const toBegin = () => {
  if (!travelTime.value) {
    selectDateTime.value.open()
    return
  }
  confirmTravelTime()
}
const confirmTravelTime = () => {
  const params = {
    product_id: route.query.product_id,
    product_name: productDetail.product_name,
    pay_amount: productDetail.price,
    travelTime: travelTime.value
  }
  router.push({ path: '/createOrder', query: params })
}

onMounted(async () => {
  await getProductDetailFun()
})
</script>
<style scoped>
.card-tabs .n-tabs-nav--bar-type {
  padding-left: 4px;
}
</style>
<style lang="scss" scoped>
.city {
  line-height: 32px;
  border: 1px solid #ddd;
}
.city.active {
  line-height: 32px;
  border: 1px solid #f00;
}
</style>
<style>
.need-kown .nut-tabs__titles {
  border-bottom: 1px solid #ddd;
}
.nut-steps-vertical.nut-steps-dot .nut-step-finish .nut-step-icon {
  color: #3d8ffd;
  background-color: #3d8ffd;
}
.nut-step.nut-step-finish .nut-step-line {
  background-color: #3d8ffd;
}
</style>